<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-product-grid.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width recommendation-ul">
     {%- if cart != empty -%}
    
  
     <div class="cart-collection">
         {%- assign list_id = '' -%}
       
         {%- assign  TitleOne = "TENWAYS CGO600" -%}
  
         {%- assign  TitleSen = "TENWAYS CGO800S" -%}
       
         {%- assign  TitleThr = "CGO600 Rear Carrier" -%}
  
        {% assign list_title = '' %}
        {% for item in cart.items %}
        {% assign list_title = list_title | append: item.product.title | append: ', ' %}  
        {%- assign list_id = list_id | append: '-' | append: item.product_id -%}  

        {% endfor %}
  
  
         {% if list_title contains  TitleOne or list_title contains  TitleOne and list_title contains TitleSen %}
        <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
               {%- liquid
        assign products_to_display = section.settings.collection.all_products_count
      
        if section.settings.collection.all_products_count > section.settings.products_to_show
          assign products_to_display = section.settings.products_to_show
          assign more_in_collection = true
        endif
      -%}
      <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
        <div class="{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
          <h2> {{ section.settings.title | escape }} </h2>
      
          {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
            <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
          {%- endif -%}
        </div>
      
        <slider-component class="slider-mobile-gutter">
          <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
            {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
             {%- unless list_id contains product.id -%}
            <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
                {% render 'cart-product-card',
                  product_card_product: product,
                  media_size: section.settings.image_ratio,
                  show_secondary_image: section.settings.show_secondary_image,
                  add_image_padding: section.settings.add_image_padding,
                  show_vendor: section.settings.show_vendor,
                  show_image_outline: section.settings.show_image_outline,
                  show_rating: section.settings.show_rating,
                  add_to_cart: section.settings.add_to_cart
                %}
              </li>
             {%- endunless -%}
            {%- else -%}
              {%- for i in (1..4) -%}
                <li class="grid__item">
                  {% render 'product-card-placeholder' %}
                </li>
              {%- endfor -%}
            {%- endfor -%}
          </ul>
          {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
            <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
              <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
              <div class="slider-counter caption">
                <span class="slider-counter--current">1</span>
                <span aria-hidden="true"> / </span>
                <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
                <span class="slider-counter--total">{{ products_to_display }}</span>
              </div>
              <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
            </div>
          {%- endif -%}
        </slider-component>
      
        {%- if section.settings.show_view_all and more_in_collection -%}
          <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
            <a href="{{ section.settings.collection.url }}"
              class="button"
              aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
            >
              {{ 'sections.featured_collection.view_all' | t }}
            </a>
          </div>
        {%- endif -%}
      </div>
      
       {% elsif list_title contains  TitleSen or list_title contains TitleThr %}
       
        <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
            {%- liquid
        assign products_to_display = section.settings.collection.all_products_count
      
        if section.settings.collection.all_products_count > section.settings.products_to_show
          assign products_to_display = section.settings.products_to_show
          assign more_in_collection = true
        endif
      -%}
      <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
        <div class="{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
          <h2> {{ section.settings.title | escape }} </h2>
      
          {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
            <a href="{{ section.settings.collection_2.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
          {%- endif -%}
        </div>
      
        <slider-component class="slider-mobile-gutter">
          <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
            {%- for product in section.settings.collection_2.products limit: section.settings.products_to_show -%}
              {%- unless list_id contains product.id -%} 
            <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
                {% render 'cart-product-card',
                  product_card_product: product,
                  media_size: section.settings.image_ratio,
                  show_secondary_image: section.settings.show_secondary_image,
                  add_image_padding: section.settings.add_image_padding,
                  show_vendor: section.settings.show_vendor,
                  show_image_outline: section.settings.show_image_outline,
                  show_rating: section.settings.show_rating,
                  add_to_cart: section.settings.add_to_cart
                %}
              </li>
               {%- endunless -%}
            {%- else -%}
              {%- for i in (1..4) -%}
                <li class="grid__item">
                  {% render 'product-card-placeholder' %}
                </li>
              {%- endfor -%}
            {%- endfor -%}
          </ul>
          {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
            <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
              <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
              <div class="slider-counter caption">
                <span class="slider-counter--current">1</span>
                <span aria-hidden="true"> / </span>
                <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
                <span class="slider-counter--total">{{ products_to_display }}</span>
              </div>
              <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
            </div>
          {%- endif -%}
        </slider-component>
      
        {%- if section.settings.show_view_all and more_in_collection -%}
          <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
            <a href="{{ section.settings.collection.url }}"
              class="button"
              aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection_2.title }}"
            >
              {{ 'sections.featured_collection.view_all' | t }}
            </a>
          </div>
        {%- endif -%}
      </div>
         
       
       {% endif %}
       
     </div>
  
     {%- endif -%}

</div>





{% schema %}
  {
    "name": "Cart collection",
    "class": "spaced-section collection-grid-section",
    "settings": [
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__2.content"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "Header"
    },
    {
    "type": "collection",
    "id": "collection",
    "label": "Collection"
    },
    {
    "type": "collection",
    "id": "collection_2",
    "label": "Collection 2"
    },
  {
    "type": "range",
    "id": "products_to_show",
    "min": 2,
    "max": 12,
    "step": 2,
    "default": 4,
    "label": "products to show"
  },
  {
    "type": "checkbox",
    "id": "show_view_all",
    "default": true,
    "label": "Show_view_all"
  },
  {
    "type": "checkbox",
    "id": "swipe_on_mobile",
    "default": false,
    "label": "swipe_on_mobile"
  },
  {
    "type": "header",
    "content": "header"
  },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.product-recommendations.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.product-recommendations.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.product-recommendations.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_rating.label",
      "info": "t:sections.product-recommendations.settings.show_rating.info"
    },
    {
      "type": "text",
      "id": "add_to_cart",
      "default": "Add to cart",
      "label": "Add to cart"
    }
    ],
    "presets": [
    {
      "name": "Cart collection"
    }
  ]
  }
{% endschema %}
